// 应用一个全局的变量
@import "../../../assets/less/global_style";

body{
  background-color: @bkLightGray;
  background: url(/img/login_background.svg);
}

// login
.login{
  width: 100%;
  height: 100%;
  position: relative;

  &>div{
    position: absolute;
  }
  .title {
    font-size: 30px;
    font-family: @fontFamily;
    height: @height40;
    width: fit-content;
    margin: @XCenter;
    border-radius: @borderRadius2;
    top: 25%;
    .block-left-center();;
    span{
      float: left;
      height: @height40;
      display: inline-block;
    }
    span:nth-child(1) {
      border-radius: 2px 0 0 2px;
    }
    span:not(:nth-child(2)){
      background-color: @bkBlue;
      width: 7px;
    }
    span:nth-child(2) {
      line-height: @height40;
      padding:0 70px ;
      background-color: @bkLightGray;
    }
    span:nth-child(3) {
      border-radius : 0 2px 2px 0;
    }
  }

  .login-wrap {
    width: 270px;
    border-radius: @borderRadius5;
    position: absolute;
    top:30%;
    left: 50%;
    transform: translate(-50%, 70px);
    z-index: @zIndex4;
    background-color: rgba(16, 100, 156, 0.85);
    background: linear-gradient(rgba(23, 118, 187, 0.8), rgba(16, 100, 156, 0.85));
    padding: 20px;

    input{
      margin: 10px 0 40px 0 ;
    }
    .btn {
      .btn-blue();
      margin-top: 30px;

      &:hover {
        background-color: #1E9FFF;
      }
    }

  }

  .circle-wrap{
    height: 40%;
    width: 100%;
    bottom: 0;
    overflow: hidden;
    .circle {
      width: 4000px;
      height: 4000px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient( rgba(23, 118, 187, 0.8), rgba(13, 63, 100, 0.8) 250px);
    }

    .notes {
      position: absolute;
      .text-center();
      color: @fontWhite;
      bottom: 60px;
      .block-left-center();
      font: @font14;
    }
  }
}